<!-- 设备主体 -->

<template>
  <CommonBody
    class="Secure-DeviceBody"
    hasTree
    :tree="tree"
    :field="TREE_FIELD"
    :param="selectParam"
    :hasReset="hasReset"
    :expandOnClick="expandOnClick"
    :filterTip="filterTip"
    :diy="diy"
    noExpand
    @change="toChange"
    @expand="toChange"
    @collapse="toChange"
  >
    <template #treeNode="{ data, nodeClass }">
      <div :class="nodeClass">
        <img v-if="data.device" :src="CORE.imageIOT(data.device)" />
        <span>{{ data.name }}</span>
      </div>
    </template>

    <slot />

    <template #treeBottom>
      <slot name="treeBottom" />
    </template>
  </CommonBody>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import UTIL from './UTIL'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeviceBody',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixSelect(), CORE.mixTree()],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 跟设备类型或子系统相关的设备键名
     */
    key() {
      const { deviceCategoryId, subSystemId } = this.selectParam
      return `device_${deviceCategoryId || subSystemId}`
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听设备就绪
     */
    readySelect(ready) {
      ready && this.setAreaDevice()
    },
  },

  /**
   * 创建完成 (先抽取再调用)
   */
  created() {
    this.initTree()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 初始化结构树
     */
    initTree() {
      // 先关闭单例结构树
      this.INIT_CONFIG.IS_SINGLE_TREE = false

      // 设置区域树
      const region = []
      UTIL.updateTreeMulti(region, CORE.clone(CORE.REGION.MY_TREE))
      this.setTree(region)

      // 再打开单例结构树
      this.INIT_CONFIG.IS_SINGLE_TREE = true

      if (this.initRoot) {
        // 默认选中根节点
        region.length && this.toChange(region[0])
      }

      // 查询第一层设备
      this.selectParam.nextIdList = CORE.REGION.TREE.map(({ id }) => id)
      this.startSelect()
    },

    /**
     * 设置区域设备
     */
    setAreaDevice() {
      const { select, selectParam, treeMap, key, checkDisable } = this

      selectParam.nextIdList.forEach((id, i) => {
        if (!select[i]) return

        const area = treeMap[id] || { children: [] }
        const deviceList = select[i].map((device) => ({
          nodes: [],
          id: device.id,
          name: device.showName,
          disabled: checkDisable(device),
          device,
        }))
        this.$set(area, key, deviceList)

        const activeDevice = area[key]
        this.$set(area, 'childrenLeaf', activeDevice)
        this.$set(area, 'nodes', [...activeDevice, ...area.children])
      })

      selectParam.nextIdList = []
    },

    /**
     * 切换结构树
     */
    toChange(data) {
      const { id, name, device } = data || {}
      const { setChosen, selectParam, treeMap, key, setSelect, startSelect } = this
      setChosen(device)

      // 点击设备节点
      if (device) {
        CORE.merge(selectParam, { treeId: id, nextIdList: [] })
        return
      }

      CORE.merge(selectParam, { treeId: id, areaId: id, areaName: name, nextIdList: [] })

      // 点击重置按钮
      if (CORE.isEmpty(data)) return

      // 点击区域节点
      const nextIdList = treeMap[id][key] ? [] : [id]
      CORE.REGION.MAP[id].children.forEach((item) => !treeMap[item.id][key] && nextIdList.push(item.id))

      CORE.merge(selectParam, { areaId: id, areaName: name, nextIdList })

      // 判断是否查询
      if (nextIdList.length) {
        setSelect()
        startSelect()
      }
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
